<template>
  <el-aside style="width: 220px">
    <div class="filter-box">
      <h4>筛选</h4>
      <!-- 折叠面板 -->
      <el-collapse v-model="propertyName">
        <el-collapse-item
          v-for="item in properties"
          :key="item.parent_type"
          :title="item.parent_name"
          :name="item.parent_type"
        >
          <div class="filter-tags">
            <el-tag
              type="info"
              v-for="i in item.list"
              :key="i.type"
              @click="selectTag(i)"
              :class="{ 'tag-selected': currentTagType[item.title] === i.type }"
            >
              {{ i.name }}
            </el-tag>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-aside>
</template>

<script>
export default {
  props: ["properties", "currentTagType"],

  data() {
    return {
      propertyName: [], // 记录展开状态
    };
  },

  /* 注：如果在mounted时获取父组件mounted时传入的数据，则undefined，因子组件挂载后，父组件才挂载；
    可监听数据变化后，在更改值，达到页面渲染得目的
  */
  watch: {
    currentTagType: {
      handler() {
        for (let item in this.currentTagType) {
          this.propertyName.push(this.currentTagType[item][0]);
        }
      },
    },
  },

  methods: {
    selectTag(option) {
      // 在路由中添加和删除
      const query = { ...this.$route.query };

      if (this.currentTagType[option.title] === option.type) {
        // 在路由中存在
        this.currentTagType[option.title] = "";
        delete query[option.title];
      } else {
        // 不存在则添加
        this.currentTagType[option.title] = option.type;
        query[option.title] = option.type;
      }
      this.$router.push({
        query,
      });
    },
  },
};
</script>

<style scoped>
.filter-box {
  background-color: #fff;
  padding: 10px;
  width: 100%;
  float: left;
  box-sizing: border-box;
}
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.filter-tags .tag-selected {
  background-color: #ff3232;
  color: #fff;
}
</style>